<template>
	<div style="position: relative;">

		<div class="one">

			<div class="header" @click="drawer_one = true">
				<span>新增一类<i class="el-icon-circle-plus"></i></span>
			</div>

			<!-- 下拉弹框 -->
			<el-drawer size="80%" title="新增一类" :visible.sync="drawer_one" :direction="direction">
				<el-input style="padding: 10px;" v-model="new_one" placeholder="请输入新增一类的名称"></el-input>
				<el-button type="primary" v-on:click='add_one()' style="display: block; width: 80%; margin: 10px auto;">
					保存一类</el-button>
			</el-drawer>




			<div class="divContainer">

				<div class="item" v-for='class_ in class_A' v-on:click="ch_one(class_.id)"
					:class="[class_A_id === class_.id?'active': '']">
					<span>{{class_.class_name}}</span>
				</div>

			</div>
			
			<div style="height: 116px;"></div>

		</div>









		<div class="two">

			<div class="header" @click="drawer_two = true">
				<span>新增二类<i class="el-icon-circle-plus"></i></span>

			</div>



			<!-- 下拉弹框 -->
			<el-drawer  size="80%" title="新增二类" :visible.sync="drawer_two" :direction="direction">
				<el-input style="padding: 10px;" v-model="new_two" placeholder="请输入新增二类的名称"></el-input>
				<el-button type="primary" v-on:click='add_two()' style="display: block; width: 80%; margin: 10px auto;">
					保存二类</el-button>
			</el-drawer>






			<div class="divContainer">

				<div class="item" v-for='class_ in class_B' 
				:class="[class_id === class_.id?'active': '']"
				v-on:click='ch_two(class_.id)'>
					<span>{{class_.class_name}}</span>
					<i class="el-icon-circle-plus" 
					v-on:click="ch_two_drawer(class_.id, class_.class_name)"></i>
				</div>

			</div>

			<!-- 下拉弹框 -->
			<el-drawer size="60%" title="所有SPU" :visible.sync="drawer_spu" :direction="direction" :with-header="false">
				<div style="margin:10px;">
					<font style="color: red;">{{class_B_name}}</font> 最新添加的9个SPU
				</div>
				<div>


					<span v-for="spu_item in spu_list.slice(0,9)"
						style="display: inline-block; width: 100px; text-align: center;">{{spu_item.spu_name}}</span>

				</div>
				
				<el-input style="padding: 10px;" v-model="new_spu" placeholder="请输入新增SPU的名称"></el-input>
				<el-button type="primary" v-on:click='add_spu()' style="display: block; width: 80%; margin: 10px auto;">
					保存SPU</el-button>


			</el-drawer>
			
			<div style="height: 116px;"></div>

		</div>
		
		
	
	<DelUpdate 
	:class_id='class_id' 
	:can_del_id = 'can_del_id'
	@deleteClassSuccess="deleteClassSuccess()"
	@updateClassSuccess="updateClassSuccess()">
	</DelUpdate>



	</div>
</template>

<script>
	import {
		select_all_ancestor_url,
		add_class_ancestor_url,
		select_class_son_url,
		add_class_son_url,
		add_spu_url,
		select_all_spu_by_class_id_url
	} from "../../utils/setting.js"
	
	import DelUpdate from './del_update.vue'
	export default {
		name: '',
		components: {DelUpdate},
		props: {},
		data() {
			return {
				class_A: [{
					'id': 1,
					'class_name': '五金'
				}, {
					'id': 2,
					'class_name': '板材'
				}],
				spu_list: [{
						'id': 10,
						'class_id': 20,
						'spu_name': 'IPHONE4'
					},
					{
						'id': 10,
						'class_id': 20,
						'spu_name': 'IPHONE5'
					},
					{
						'id': 10,
						'class_id': 20,
						'spu_name': 'IPHONE5'
					},
					{
						'id': 10,
						'class_id': 20,
						'spu_name': 'IPHONE5'
					},
					{
						'id': 10,
						'class_id': 20,
						'spu_name': 'IPHONE5'
					},
					{
						'id': 10,
						'class_id': 20,
						'spu_name': 'IPHONE5'
					},

				],
				class_B: [],
				class_A_id: '',
				class_B_id: '',
				class_B_name: '',
				direction: 'ttb',
				drawer_one: false,
				drawer_two: false,
				drawer_spu: false,
				new_one: '',
				new_two: '',
				new_spu: '',
				class_id: '',
				can_del_id: '',
			}
		},
		methods: {
			updateClassSuccess(){
				setTimeout(function(){
					location.reload()
				}, 1000)
			},
			deleteClassSuccess(){
				setTimeout(function(){
					location.reload()
				}, 1000)
			},
			ch_two(id){
				this.class_id = id
				this.can_del_id = id
			},
			ch_one(id) { //查看A节点的所有儿子节点

				this.class_id = id
				this.class_A_id = id
				this.$axios({
					method: 'GET',
					url: select_class_son_url,
					params: { //这里是发送给后台的数据
						class_name: id,
					}
				}).then((response) => { //这里使用了ES6的语法
					this.class_B = response.data.resultBody
					if(this.class_B.length == 0){
						this.can_del_id = id
					}else{
						this.can_del_id = ''
					}
				}).catch((error) => {
					// console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})

			},

			ch_two_drawer(id, name) {
				this.class_B_id = id
				this.class_B_name = name
				this.drawer_spu = true
				// this.class_id = id


				this.$axios({
					method: 'GET',
					url: select_all_spu_by_class_id_url,
					params: { //这里是发送给后台的数据
						class_id: this.class_B_id
					}
				}).then((response) => { //这里使用了ES6的语法

					if (response.data.status == -1) {

						this.$message({
							message: response.data.errorMsg,
							type: 'error'
						})

						return

					}

					this.spu_list = response.data.resultBody.reverse()

				}).catch((error) => {
					// console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})

			},

			add_one() { //新增一类

				this.$axios({
					method: 'GET',
					url: add_class_ancestor_url,
					params: { //这里是发送给后台的数据
						class_name: this.new_one,
					}
				}).then((response) => { //这里使用了ES6的语法

					if (response.data.status == -1) {

						this.$message({
							message: response.data.errorMsg,
							type: 'error'
						})

						return

					}

					this.$message({
						message: "类别：" + this.new_one + "   添加成功",
						type: 'success'
					})
					setTimeout(function() {

						window.location.reload();
						this.drawer_one = false
					}, 2000)
				}).catch((error) => {
					// console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})

			},

			add_two() { //新增二类

				if (this.class_A_id == '') {
					this.$message({
						message: "请选择一类，才能增加二类",
						type: 'error'
					})

					return
				}

				this.$axios({
					method: 'GET',
					url: add_class_son_url,
					params: { //这里是发送给后台的数据
						class_name: this.new_two,
						parent_id: this.class_A_id
					}
				}).then((response) => { //这里使用了ES6的语法

					if (response.data.status == -1) {

						this.$message({
							message: response.data.errorMsg,
							type: 'error'
						})

						return

					}
					this.$message({
						message: "二类别：" + this.new_two + "   添加成功到",
						type: 'success'
					})
					setTimeout(function() {

						window.location.reload();
					}, 2000)
				}).catch((error) => {
					// console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})

			}, //end 新增二类


			add_spu() { //新增spu

				if (this.class_B_id == '' || this.class_B_name == '') {
					this.$message({
						message: "请选择二类，才能增加SPU",
						type: 'error'
					})

					return
				}





				this.$axios({
					method: 'GET',
					url: add_spu_url,
					params: { //这里是发送给后台的数据
						spu_name: this.new_spu,
						class_id: this.class_B_id
					}
				}).then((response) => { //这里使用了ES6的语法

					if (response.data.status == -1) {

						this.$message({
							message: response.data.errorMsg,
							type: 'error'
						})

						return

					}
					this.$message({
						message: "SPU：" + this.new_spu + "   添加成功到" + this.class_B_name,
						type: 'success'
					})
					// setTimeout(function (){

					// 	window.location.reload();
					// }, 2000)
				}).catch((error) => {
					// console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})

			}, //end 新增spu
			
			
			get_all_ancestor(){
				this.$axios({
					method: 'GET',
					url: select_all_ancestor_url,
				}).then((response) => { //这里使用了ES6的语法
					// console.log(response) //请求成功返回的数据
					this.class_A = response.data.resultBody.reverse()
				}).catch((error) => {
					// console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})
			},


		},
		computed: {},
		watch: {},
		created() {},
		mounted() {

			this.get_all_ancestor()

		},
	}
</script>

<style scoped lang="less">
	.one,
	.two {
		width: 50%-0.5px;
		display: inline-block;
	}

	.one {
		// border-right: 0.5px solid black;
		position: absolute;
		left: 0px;
		top: 0px;
	}

	.two {
		// border-left: 0.5px solid black;
		position: absolute;
		right: 0px;
		top: 0px;
	}

	.header {
		height: 60px;
		line-height: 60px;
		text-align: center;
		font-size: 20px;
		background-color: floralwhite;
	}

	.item {
		position: relative;
		height: 40px;
		line-height: 40px;
		font-size: 20px;
		// background-color: #F0F0F0;
		border-bottom: 0.5px solid #F0F0F0;

		span {
			padding-left: 10px;
		}

		i {
			position: absolute;
			display: block;
			right: 15px;
			top: 10px;
			color: orangered;
		}

	}

	.active {
		background-color: orange;
		color: white;
	}
	
	.divContainer{
		overflow: auto;
		// height: 300px;
		height: 480px;
	}
	
	.divContainer::-webkit-scrollbar {
		border-width:1px;
	}

	// .el-drawer{
	// 	// height: 800px;
	// 	.el-button{
	// 		display: block;
	// 		margin-bottom: 10px;
	// 	}
	// }

	// .el-button{
	// 	display: block;
	// 	margin-bottom: 400px;
	// }
</style>
